<nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="courseType.id ? '课程类型信息详情' : '新增课程类型信息'"
  (nzOnCancel)="handleCancel()" [nzFooter]="detailFooter" nzWidth="1200">

  <form nz-form [formGroup]="validateForm" #courseTypeForm="ngForm">
    <div nz-row [nzGutter]="16">
      <b style="color: red;">基本信息</b>
      <nz-divider nzType="horizontal"></nz-divider>
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="code" nzRequired>课程类型编号</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="codeErrorTpl">
            <input nz-input formControlName="code" [(ngModel)]="courseType.code" [placeholder]="'课程类型编号必填'"
              *ngIf="!isPreView; else codeTemp">
            <ng-template #codeErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入课程类型编号!
              </ng-container>
              <ng-container *ngIf="control.hasError('duplicated')">
                该课程类型编号已存在!
              </ng-container>
              <ng-container *ngIf="control.hasError('blank')">
                不可输入空格!
              </ng-container>
            </ng-template>
            <ng-template #codeTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ courseType?.code }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="courseBaseType" nzRequired>课程类型名称</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="nameErrorTpl">
            <input nz-input formControlName="name" [(ngModel)]="courseType.name" placeholder="课程类型名称必填"
              *ngIf="!isPreView; else nameTemp">
            <ng-template #nameErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入课程类型名称!
              </ng-container>
              <ng-container *ngIf="control.hasError('blank')">
                不可输入空格!
              </ng-container>
            </ng-template>
            <ng-template #nameTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ courseType?.name }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="courseBaseType" nzRequired>课程基础类型</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <nz-select [(ngModel)]="courseType.courseBaseType" formControlName="courseBaseType" nzAllowClear
              nzPlaceHolder="课程基础类型选填" *ngIf="!isPreView; else courseBaseTypeTemp">
              <nz-option nzValue="REQUIRED_COURSE" nzLabel="必修课"></nz-option>
              <nz-option nzValue="OPTIONAL_COURSE" nzLabel="任选课"></nz-option>
              <nz-option nzValue="RESTRICTED_COURSE" nzLabel="限选课"></nz-option>
            </nz-select>
            <ng-template #courseBaseTypeTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{  courseType.courseBaseType === 'REQUIRED_COURSE' ? '必修课' 
                  : courseType.courseBaseType === 'OPTIONAL_COURSE' ? '任选课'
                  : courseType.courseBaseType === 'RESTRICTED_COURSE' ? '限选课'
                  : '无' }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="showOrder" nzRequired [nzSpan]="10">显示顺序</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="showOrderErrorTpl">
            <nz-input-number [(ngModel)]="courseType.showOrder" [nzMin]="0" [nzStep]="1" formControlName="showOrder"
              *ngIf="!isPreView; else showOrderTemp">
            </nz-input-number>
            <ng-template #showOrderErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入显示顺序!
              </ng-container>
            </ng-template>
            <ng-template #showOrderTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ courseType?.showOrder }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>

  <ng-template #detailFooter>
    <button nz-button nzType="primary" (click)="save()" *ngIf="!isPreView" [nzLoading]="loading">
      <span>保存</span>
    </button>
    <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
  </ng-template>
</nz-modal>
